import { ready } from '@/lib/utils.ts';

import {
    SelectionEditor
} from '@/components/table/components/edit';

import {
    setupEditablePage
} from '@/components/table/lib';

import {
    tf,
    questionMarkHeaderComponentParams,
    formatHeaderComponentTemplate,
    questionMarkSvg,
    editableSvg,
    getEditableColTooltip,
} from '@/components/table/lib';


(function () {
    ready(() => {
        setupEditablePage({
            getDataApiUrl: '/api/user/management/permission',
            submitChangedDataApiUrl: '/api/user/management/permission',
            getOptions: (manager) => ({
                columnDefs: [
                    {
                        ...tf("username", "用户名"),
                        minWidth: 150,
                        flex: 1,
                    },
                    {
                        ...tf("full_name", "姓名"),
                        width: 150,
                    },
                    {
                        ...tf("user_group_type", "类型"),
                        type: 'editable',
                        onCellValueChanged: manager.onCellValueChanged,
                        width: 120,
                        
                        cellRenderer: (params: any) => params.value == 'internal_staff' ? gettext("内部员工 ") : gettext("外部人员"),
                        filterParams: {
                            textFormatter: (v: string) => {
                                if (v == "internal_staff")
                                    return gettext("内部员工")
                                else if (v == "external_personal")
                                    return gettext("外部人员")
                                return v
                            }
                        },
                        cellEditor: SelectionEditor,
                        cellEditorParams: {
                            labelValueMap: new Map([
                                ['内部员工', 'internal_staff'],
                                ['外部人员', 'external_personal']
                            ]),
                        },
                    },
                    {
                        ...tf("is_setaff", "工作人员"),
                        type: 'editable',
                        onCellValueChanged: manager.onCellValueChanged,
                        width: 150,
                                
                        headerComponentParams: {
                            template: formatHeaderComponentTemplate(
                                questionMarkSvg + editableSvg
                            )
                        },
                        headerTooltip:
gettext("能登陆后台管理面板, 但只能管理自己具有权限部分。") + getEditableColTooltip(),
                    },
                    {
                        ...tf("perm_can_manage_projects", "管理项目"),
                        type: 'editable',
                        onCellValueChanged: manager.onCellValueChanged,
                        width: 150,
                    },
                    {
                        ...tf("perm_can_manage_users", "管理用户"),
                        type: 'editable',
                        onCellValueChanged: manager.onCellValueChanged,
                        width: 150,
                                
                        headerComponentParams: {
                            template: formatHeaderComponentTemplate(
                                questionMarkSvg + editableSvg
                            )
                        },
                        headerTooltip:
gettext("在后台管理面板不能管理用户。") + getEditableColTooltip(),
                    },
                    {
                        ...tf("perm_can_manage_resources", "管理资源"),
                        type: 'editable',
                        onCellValueChanged: manager.onCellValueChanged,
                        width: 120,
                    },
                    {
                        ...tf("is_superuser", "超级管理员"),
                        headerComponentParams: questionMarkHeaderComponentParams,
                        headerTooltip: gettext("具有所有权限"),
                        width: 150,
                    },
                ]
            }),
        });
    });
})();
